<template>
	<view class="maps-container">
		<view class="search-bar">
			<view class="search-bar-form">
				<view class="search-bar-box">
					<icon class="icon-search-in-box" type="search" :size="16"></icon>
					<input confirm-type="search" class="search-bar-input" placeholder="请输入店名或菜名" :value="inputVal" :focus="inputShowed"
					 @confirm="bindInput" @input="inputTyping" />
					<view class="icon-clear" v-if="inputVal" @tap="clearInput">
						<icon type="clear" size="14"></icon>
					</view>
				</view>
				<view class="search-bar-label" v-show="!inputShowed" @tap="showInput">
					<icon class="icon-search" type="search" :size="16"></icon>
					<view class="search-bar-text">请输入店名或菜名</view>
				</view>
			</view>
			<view class="cancel-btn" @tap="hideInput" v-show="inputShowed">取消</view>
		</view>
		<map id="maps" class="tui-map" :latitude="lat" :longitude="lng" :markers="covers" @markertap="marker" :scale="16" show-location @regionchange="regionchange"></map>
		<!-- 当前定位按钮-->
		<tui-bubble-popup :show="locationPopupShow" :mask="false" position="absolute" borderWidth='0' right="12rpx" bottom="21%" width="110rpx" translateY="0" backgroundColor="#FFF" radius="50%">
			<view class="location-icon" @click="moveToLocation()">
				<view class="tui-grid-icon">
					<tui-icon name="location" :size="25" color="#ff7900"></tui-icon>
				</view>
				<text class="tui-grid-label">定位</text>
			</view>	
		</tui-bubble-popup>
		<!-- 列表-->
		<tui-bubble-popup :show="listsPopupShow" :mask="false" position="absolute" borderWidth='0' right="12rpx" bottom="10%" width="110rpx" translateY="0" backgroundColor="#FFF" radius="50%">
			<view class="location-icon" @click="showModal()">
				<view class="tui-grid-icon">
					<tui-icon name="listview" :size="25" color="#ff7900"></tui-icon>
				</view>
				<text class="tui-grid-label">打卡</text>
			</view>	
		</tui-bubble-popup>
		<!--底部抽屉-->
		<tui-bottom-popup :show="bottomPopup" :mask="false" :radius="true" >
			<view class="box" @touchstart="move.touchstart" @touchend="move.touchend" @touchmove="move.touchmove" :data-lastop="footerHeight" :data-topheight="footerTopHeight">
				<view class="popup-top" @tap="move.tap">
					<xh-line width="200rpx" margin="0 auto" type="warning" :scaleRatio="0.8" line></xh-line>
				</view>
				<scroll-view scroll-y class="scrollView" :style="{height:scrollH +'px'}" :enable-flex="true" @scrolltolower="pullUp" @scrolltoupper="upperUp" @scroll="scrollUp">
					<!-- <view class="tui-list" @touchmove="move.touchviewmove" :data-isscrolltop="isScrollTop" > -->
					<view class="tui-list" :data-isscrolltop="isScrollTop" >
						<view class="tui-list-cell" :class="[index==address.length-1?'tui-cell-last':'']" v-for="(item,index) in address" :data-codeid="item.id"
						 :key="index" @tap="showDetailModal">
							<view class="tui-list-left">
								<image :src="item.cover" class="tui-msg-pic" mode="widthFix"></image>
							</view>
							<view class="tui-list-right">
								<view class="addr-title">
									<text>{{item.title}}</text>
								</view>
								<view class="addr-box ">
									<view class="addr-detail ">
										<view class="catesinfo">
										<tui-tag shape="circleRight" size="20rpx" margin="0 10rpx 0 0" padding="8rpx" type="btn-gray">{{item.cateinfo}}</tui-tag>
										<tui-tag v-for="(item2,index2) in item.mark" padding="8rpx" margin="0 10rpx 0 0" size="20rpx" type="light-orange">{{item2}}</tui-tag>
										</view>
										<view class="addr-add">
											<text class="distance">{{item.distance}}m</text>
											<text class="addr-address">{{item.address}}</text>
										</view>
									</view>
									<view class="addr-opera">
										
										<view class="opera-box " hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="goList" :data-lng="item.lng" :data-lat="item.lat" :data-title="item.title" :data-address="item.address">
											<image src="/static/images/my/go.png" class="mini-img"></image>
											<view class="text">到这里</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<tui-loadmore :index="3" v-if="loading"></tui-loadmore>
					</view>
				</scroll-view>
			</view>
		</tui-bottom-popup>
		<!--底部抽屉-->
		<tui-bottom-popup :show="bottomDetailPopup" :radius="true" @close="hideDetailModal">
			<view class="detail-header">
				<tui-tag shape="circle" size="24rpx" margin="0 10rpx 0 0" padding="8rpx" type="light-orange" v-for="(item,index) in detailData.mark">{{item}}</tui-tag>
				<icon type="clear" :size="19" color="#c0c0c0" class="detail-icon-close" @tap="hideDetailModal"></icon>
			</view>
			<tui-card :image="detailData.img" :title="detailData.title" :tag="detailData.tag" :full="true">
				<template v-slot:body>
					<scroll-view scroll-y class="detail-content">
						<jyf-parser :html="detailData.content"></jyf-parser>
					</scroll-view>
				</template>
				<template v-slot:footer>
					<view class="detail-footer detail-share-top">
						<view class="detail-share-item" @tap="daka">
							<view class="detail-share-icon"  :hover-stay-time="150">
								<tui-icon name="position" color="#07BDFD" :size="34"></tui-icon>
							</view>
							<view class="detail-share-text">打卡</view>
						</view>
						<view class="detail-share-item" @tap="shoucang">
							<view class="detail-share-icon"  :hover-stay-time="150">
								<tui-icon name="star" color="#07BDFD" :size="34"></tui-icon>
							</view>
							<view class="detail-share-text">收藏</view>
						</view>
						<view class="detail-share-item" @tap="call">
							<view class="detail-share-icon"  :hover-stay-time="150">
								<tui-icon name="voipphone" color="#07BDFD" :size="34"></tui-icon>
							</view>
							<view class="detail-share-text">电话</view>
						</view>
						<view class="detail-share-item" @tap="go">
							<view class="detail-share-icon"  :hover-stay-time="150">
								<tui-icon name="gps" color="#07BDFD" :size="34"></tui-icon>
							</view>
							<view class="detail-share-text">导航</view>
						</view>
					</view>
				</template>
			</tui-card>
		</tui-bottom-popup>
		<tui-loading v-if="bigloading"></tui-loading>
	</view>
</template>

<script module="move" lang="wxs" src="./index.wxs"></script>
<script>
	import xhLine from "@/components/xiaohui/xh-line/xh-line.vue";
	import jyfParser from '@/components/xiaohui/jyf-parser/jyf-parser';
	const QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js');
	let startY = 0, moveY = 0, pageAtTop = true;
	export default {
		components:{
			xhLine,
			jyfParser
		},
		data() {
			return {
				inputShowed: false,
				inputVal: "",
				lat: 22.63137,
				lng: 114.010857,
				covers: [],
				address: [],
				scrollH: 256,
				pageIndex: 1,
				loading: true,
				pullUpOn: true,
				keywords: '',
				bottomPopup: true,
				footerHeight: 256,
				footerTopHeight: 0,
				isScrollTop: true,
				mapCtx: null,
				locationPopupShow: true,
				listsPopupShow: true,
				bigloading:false,
				bottomDetailPopup: false,
				detailData: {}
			}
		},
		onLoad(options) {
			this.keywords = options.key || '加油站';
			setTimeout(() => {
				//let winHeight = uni.getSystemInfoSync().windowHeight;
				this.scrollH = this.footerHeight;
				//console.log(this.scrollH);
				this.getLocation(() => {
					this.getPoiAround(this.keywords)
				});
			}, 500);
		},
		mounted() {
			this.getFooterHeight();
		},
		methods: {
			moveToLocation(e) {
				this.bigloading = true;
				this.loading = true;
				if (!this.mapCtx) {
					this.mapCtx = uni.createMapContext("maps");
				}
				this.getLocation(() => {
					this.mapCtx.moveToLocation({
						longitude: this.longitude,
						latitude: this.latitude
					});
					this.getPoiAround(this.keywords);
				});
			},
			regionchange(e) {
				// 地图发生变化的时候，获取中间点，也就是cover-image指定的位置
				let isEnd = e.type == 'end'
				// #ifdef APP-PLUS || MP-WEIXIN
				isEnd = e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')
				// #endif
				console.log('e', e);
				
				if (isEnd) {
					this.hideModal();
					if (!this.mapCtx) {
						this.mapCtx = uni.createMapContext("maps");
					}
					this.mapCtx.getCenterLocation({
						type: 'gcj02',
						success: (res) => {
							this.lat = res.latitude;
							this.lng = res.longitude;
							//console.log(res);
							this.getPoiAround(this.keywords);
							//this.showModal();
						}
					})
				}
			},
			upperUp(e){
				//console.log('isScrollTop', 1);
				this.isScrollTop = true;
			},
			scrollUp(e){
				//console.log('srcoll',e.detail.scrollTop);
				if(e.detail.scrollTop > 1){
					this.isScrollTop = false;
				}else{
					this.isScrollTop = true;
				}
			},
			changeHeight(val) {
				console.log('changeHeight');
			},
			getFooterHeight() {
				let query = wx.createSelectorQuery();
				query
					.select('.box')
					.boundingClientRect(res => {
						//console.log('height', res.height);
						this.footerHeight = res.height
					})
					.exec();
				// query
				// 	.select('.popup-top')
				// 	.boundingClientRect(res => {
				// 		//console.log('topheight', res.height);
				// 		this.footerTopHeight = res.height
				// 	})
				// 	.exec();
				
			},
			showModal: function() {
				this.bottomPopup = true;
			},
			hideModal: function() {
				console.log('bottomPopup false 1');
				this.bottomPopup = false;
			},
			trim: function(value) {
				return value ? value.toString().replace(/(^\s*)|(\s*$)/g, "") : value;
			},
			showInput() {
				this.inputShowed = true
			},
			showDetailModal: function(e) {
				let codeid = e.currentTarget.dataset.codeid || '';
				this.getPoiDetail(codeid);
				this.bottomPopup = false;
				this.bottomDetailPopup = true;
			},
			hideDetailModal: function() {
				this.bottomPopup = true;
				this.bottomDetailPopup = false;
			},
			hideInput() {
				this.inputVal = "";
				this.inputShowed = false;
				uni.hideKeyboard(); //强行隐藏键盘
			},
			clearInput() {
				this.inputVal = ""
			},
			inputTyping: function(e) {
				this.inputVal = e.detail.value
			},
			getLocation(callback) {

				//当前位置
				const that = this;
				
				//测试代码
				// that.lat = '23.118079';
				// that.lng = '113.24731';
				// callback();
				// return true;
				
				//H5：使用坐标类型为 gcj02 时，需要配置腾讯地图 sdk 信息（manifest.json -> h5）
				uni.getLocation({
					type: 'gcj02',
					//altitude: true,
					success(res) {
						//that.lat = '23.118079';
						//that.lng = '113.24731';
						that.lat = res.latitude;
						that.lng = res.longitude;
						console.log(res);
						callback();
					},
					fail(res) {
						callback();
					}
				});
			},
			calculateDistance(to, callback) {
				
			},
			getResult(data) {
				let arr = [];
				let addr = [];
				this.address = [];
				this.covers = [];
				
				for (let [index, item] of data.list.entries()) {
					
					arr.push({
						id: item.id,
						latitude: item.location.lat,
						longitude: item.location.lng,
						//title: 'no name',
						iconPath:"/static/images/maps/location.png",
						width:46,
						height:46
					});
					addr.push({
						id: item.id,
						title: item.name,
						address: item.address,
						distance: item._distance,
						cover: item.cover,
						cateinfo: item.cateinfo,
						mark: item.mark,
						lat: item.location.lat,
						lng: item.location.lng,
					});
				}
				this.address = this.address.concat(addr);
				this.covers = this.covers.concat(arr);
				//this.pageIndex++;
				this.loading = false;
				this.bigloading = false;
				if (data.length < 10) {
					this.pullUpOn = false;
				}

			},
			pullUp() {
				if (!this.pullUpOn || this.loading) return;
				this.loading = true;
				this.getPoiAround(this.keywords)
			},
			getPoiAround(keywords) {
				let url = `/qunachi/api.shops/getItem`;
				//参数
				let postData = {}
				this.tui.request(url, "POST", postData, true, false, true).then((res) => {
					if (res.code == 1) {
						let data = res.data || [];
						//console.log('data', data);
						this.getResult(data)
					}
				}).catch((res) => {
					this.tui.toast('获取店铺数据失败:'+res);
					//console.log(res);
				})
			},
			getPoiDetail(id) {
				let url = `/qunachi/api.shops/getItem`;
				//参数
				let postData = {
					id: id
				};
				this.tui.request(url, "POST", postData, false, true, true).then((res) => {
					if (res.code == 1) {
						let data = res.data || [];
						//console.log('data', data);
						this.detailData = {
							img: {
								url: data.list[0].cover
							},
							title: {
								text: data.list[0].name,
								color: "#262626",
								size: 34
							},
							tag: {
								text: '距离我' + data.list[0]._distance + '米'
							},
							mark: data.list[0].mark,
							content: data.list[0].content,
							code: data.list[0].code,
							tel: data.list[0].tel,
							address: data.list[0].address,
							lat: data.list[0].location.lat,
							lng: data.list[0].location.lng,
						};
					}
				}).catch((res) => {
					this.tui.toast('获取店铺数据失败:'+res);
					//console.log(res);
				});
			},
			bindInput: function(e) {
				this.keywords = e.detail.value;
				this.pageIndex = 1;
				this.address = [];
				this.covers = [];
				this.pullUpOn = true;
				this.getPoiAround(this.keywords);
			},
			marker: function(e) {
				
				console.log(e.detail);
				this.getPoiDetail(e.detail.markerId);
				this.bottomPopup = false;
				this.bottomDetailPopup = true;
			},
			call(event) {
				const tel = this.detailData.tel;
				if (tel) {
					uni.makePhoneCall({
						phoneNumber: tel
					})
				}
			},
			go(event) {
				const latitude = Number(this.detailData.lat)
				const longitude = Number(this.detailData.lng)
				uni.openLocation({
					name: this.detailData.title.text,
					address: this.detailData.address,
					latitude,
					longitude,
					scale: 18
				})
			},
			goList(event) {
				const latitude = Number(event.currentTarget.dataset.lat)
				const longitude = Number(event.currentTarget.dataset.lng)
				
				uni.openLocation({
					name: event.currentTarget.dataset.title,
					address: event.currentTarget.dataset.address,
					latitude,
					longitude,
					scale: 18
				})
			},
			daka(event) {
				this.tui.toast('打卡成功');
			},
			shoucang(event) {
				this.tui.toast('收藏成功');
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.tui-list {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-cell {
		width: 94%;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 3%;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 30rpx;
	}

	.tui-cell-last::after {
		border-bottom: 0;
	}

	.maps-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.tui-map {
		width: 100%;
		height: 100vh;
		display: block;
	}

	.scrollView {
		width: 100%;
		padding-bottom: 100rpx;
		background-color: #fff;
	}

	.search-bar {
		position: relative;
		padding: 8px 10px;
		display: -webkit-flex;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		background-color: #fff;
	}

	.icon-search {
		margin-right: 8px;
	}

	.icon-search-in-box {
		margin-right: 8rpx;
	}

	.search-bar-form {
		position: relative;
		-webkit-box-flex: 1;
		-webkit-flex: auto;
		flex: auto;
		border-radius: 5px;
		background-color: #f0f0f0;
	}

	.search-bar-text {
		display: inline-block;
		font-size: 14px;
		vertical-align: middle;
	}

	.search-bar-box {
		width: 100%;
		height: 30px;
		padding-left: 10px;
		padding-right: 30px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		position: relative;
		z-index: 1;
		
	}

	.search-bar-input {
		font-size: 14px;
		flex: 1;
	}

	.icon-clear {
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		padding: 0 8px;
		font-size: 0;
		display: flex;
		align-items: center;
	}

	.search-bar-label {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		border-radius: 3px;
		text-align: center;
		color: #9b9b9b;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.cancel-btn {
		margin-left: 10px;
		line-height: 30px;
		color: #5982fd;
		white-space: nowrap;
		font-size: 15px;
	}

	.addr-title {
		font-size: 30rpx;
		line-height: 40rpx;
		color: #000;
		font-weight: bold;
		width: 100%;
		padding-bottom: 20rpx;
	}

	.addr-box {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.addr-detail {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		font-size: 24rpx;
		color: #999;
		width: 82%;
	}

	.distance {
		color: #5677fc;
		padding-right: 6rpx;
	}

	.addr-opera {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.opera-box {
		text-align: center;
		margin-left: 26rpx;
	}

	.mini-img {
		width: 44rpx;
		height: 44rpx;
	}

	.text {
		color: #333;
		font-size: 24rpx;
		line-height: 30rpx;
	}
	
	.popup-top{
		text-align: center;
		width: 100%;
		align-items: center;
		padding: 20rpx 0 30rpx;
	}
	
	.box {
		height: calc(100vh - 60vh);
	}
	
	.location-icon{
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;
		background-color: #FFFFFF;
		font-weight: bold;
		box-shadow: 0 -5rpx 18rpx 8rpx rgba(14, 14, 14, 0.2);
	}
	
	.tui-grid-icon {
		margin: 5rpx auto 0;
		text-align: center;
		vertical-align: middle;
		padding: 5rpx 0 0;
		font-weight: bold;
	}
	
	.tui-grid-label {
		margin-top: 5rpx;
		display: block;
		text-align: center;
		color: #ff7900;
		font-size: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-list-left{
		width: 21%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-list-right{
		width: 79%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-pic {
		width: 130rpx;
		height: 130rpx;
		border-radius: 5%;
		display: block;
		flex-shrink: 0;
	}
	
	.catesinfo {
		display: flex;
		justify-content:inherit;
		margin: 0 0 14rpx 0;
	}
	
	.detail-header{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: left;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	.detail-icon-close {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.detail-content {
		padding: 20rpx 30rpx 0;
		min-height: 60vh;
		max-height: 60vh;
		box-sizing: border-box;
		line-height: 180%;
	}
	.detail-content image{
		width: 80%;
	}
	.detail-footer {
		padding: 40rpx 20rpx 10rpx;
	}
	.detail-share-top{
		display: flex;
		justify-content:space-around;
		white-space: nowrap;
	}
	
	.detail-share-item {
		width: 106rpx;
		display: inline-block;
		text-align: center;
	}
	
	.detail-share-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		height: 100rpx;
		width: 100rpx;
		border-radius: 30rpx;
	}
	
	.detail-hover {
		background: rgba(0, 0, 0, 0.2)
	}
	
	.detail-share-text {
		font-size: 24rpx;
		color: #7E7E7E;
		line-height: 24rpx;
		padding: 20rpx 0;
		white-space: nowrap;
	}
	
	.box {
		padding-bottom: 30rpx;
	}
	
	.tui-header-title {
		font-weight: bold;
	}
	
	.addr-add {
		display: flex;
	}
	
	.addr-address {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
</style>